<template>
	<view class="min-h-full p-8 static">
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full p-20 text-14" style="color: #5E5E5E;">
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">可提余额：</text>
					<view class="text-14">￥{{userInfo.balance}}</view>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">持卡人姓名：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入持卡人姓名" placeholder-style="color:#B8B8B8" v-model="realname"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">银行名称：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入银行名称" placeholder-style="color:#B8B8B8" v-model="bank_name"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">银行支行：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入银行支行名称" placeholder-style="color:#B8B8B8" v-model="branch_nane"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">银行卡号：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入银行卡号" placeholder-style="color:#B8B8B8" v-model="card_no"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">提现金额：</text>
					<input class="flex-1 text-14" type="text" placeholder="请输入提现金额" placeholder-style="color:#B8B8B8" v-model="money"></input>
				</view>
				<view class="w-full rounded-sm text-bold text-white text-center text-16 mt-20" style=" height:80rpx; line-height: 80rpx; background-color: #006BFF;" @tap="apply">提交申请</view>
			</view>
		</view>
		
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 8px 0px rgba(0,0,0,0.3)">
			<view class="w-full text-14" style="color: #5E5E5E;">
				<view class="text-bold text-black text-16 px-15 py-10 ">提现记录</view>
				<view v-for="item in list" :key="item.id" class="top-line py-5 px-15" style="color: #7d7d7d;">
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">持卡人姓名：</text>
						<text class="flex-1"> {{item.realname}}</text>
						<text class="text-bold text-16">
							<text v-if='item.status==0' class="" style="color: #888;">待审核</text>
							<text v-else-if='item.status==1' class="" style="color: #09B200;">成功</text>
							<text v-else-if='item.status==-1' class="" style="color: #FF3838;">失败</text>
						</text>
					</view>
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">银行名称：</text>
						<text class="flex-1"> {{item.bank_name}}</text>
					</view>
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">支行名称：</text>
						<text class="flex-1"> {{item.branch_nane}}</text>
					</view>
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">银行卡号：</text>
						<text class="flex-1"> {{item.card_no}}</text>
					</view>
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">提现金额：</text>
						<text class="flex-1"> {{item.money}}</text>
					</view>
					<view class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">申请时间：</text>
						<text class="flex-1"> {{item.create_at}}</text>
					</view>
					<view v-if="item.reason" class="flex flex-row text-14 align-items-center " style="line-height: 45rpx;">
						<text class="text-bold">审核原因：</text>
						<text class="flex-1" style="color: #FF3838;">{{item.reason}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-14 text-center my-10" style="color: #000"> ~ 暂无更多记录 ~ </view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	export default {
		data() {
			return {
				list: [],
				page: 1,
				has_more: true,
				realname: '',
				bank_name: '',
				branch_nane: '',
				card_no: '',
				money: '',
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.realname = this.userInfo.realname;
			if(!this.userInfo.phone){
				uni.showToast({
					title: '请先登录',
					icon: 'none',
				})
				setTimeout(()=>{
					uni.navigateBack()
				}, 1000)
			}
		},
		onShow() {
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			
			// 提交提现申请
			apply(){
				request.post('/pilot/balanceToCashApply', {
					realname: this.realname,
					bank_name: this.bank_name,
					branch_nane: this.branch_nane,
					card_no: this.card_no,
					money: this.money,
				}).then(res=>{
					uni.showToast({
						title: '保存成功'
					})
					request.post('pilot/userInfo').then(res=>{
						this.setUserInfo(res);
						setTimeout(()=>{
							uni.navigateBack()
						}, 1000)
					})
					this.getList(true);
				})
			},
			
			// 获取余额记录
			getList(force = false){
				if(force) {
					this.page = 1;
					this.has_more = true;
				};
				if(!this.has_more) return;
				request.post('/pilot/toCashApplyList', {
					page: this.page,
					limit: 20,
				}).then(res=>{
					this.list = force ? res.list : this.list.concat(res.list);
					this.has_more = res.has_more;
					this.page = res.page + 1;
					// 保留最新一条信息到表单
					if(force && this.list.length>0){
						this.realname = this.list[0].realname;
						this.bank_name = this.list[0].bank_name;
						this.branch_nane = this.list[0].branch_nane;
						this.card_no = this.list[0].card_no;
					}
				})
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.top-line{
		border-top: 1px solid #bbb;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
